<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { gsap } from 'gsap';

interface Props {
  pending: number;
  processing: number;
  completed: number;
  total: number;
}

const props = defineProps<Props>();

// 计算各状态的百分比
const pendingPercentage = computed(() => props.total ? (props.pending / props.total) * 100 : 0);
const processingPercentage = computed(() => props.total ? (props.processing / props.total) * 100 : 0);
const completedPercentage = computed(() => props.total ? (props.completed / props.total) * 100 : 0);

// 计算圆环路径
const radius = 80;
const circumference = 2 * Math.PI * radius;

// 动画进度值
const pendingProgress = ref(0);
const processingProgress = ref(0);
const completedProgress = ref(0);

// 计算各状态的圆弧长度
const pendingStrokeDasharray = computed(() => {
  const length = (pendingProgress.value / 100) * circumference;
  return `${length} ${circumference - length}`;
});

const processingStrokeDasharray = computed(() => {
  const length = (processingProgress.value / 100) * circumference;
  return `${length} ${circumference - length}`;
});

const completedStrokeDasharray = computed(() => {
  const length = (completedProgress.value / 100) * circumference;
  return `${length} ${circumference - length}`;
});

// 计算各状态的圆弧偏移量
const pendingStrokeDashoffset = computed(() => 0);

const processingStrokeDashoffset = computed(() => {
  return -((pendingProgress.value / 100) * circumference);
});

const completedStrokeDashoffset = computed(() => {
  return -((pendingProgress.value + processingProgress.value) / 100) * circumference;
});

// 动画效果
onMounted(() => {
  // 使用GSAP创建动画
  gsap.to(pendingProgress, {
    value: pendingPercentage.value,
    duration: 1.5,
    ease: 'power2.out'
  });
  
  gsap.to(processingProgress, {
    value: processingPercentage.value,
    duration: 1.5,
    ease: 'power2.out',
    delay: 0.2
  });
  
  gsap.to(completedProgress, {
    value: completedPercentage.value,
    duration: 1.5,
    ease: 'power2.out',
    delay: 0.4
  });
});
</script>

<template>
  <div class="task-progress-circle">
    <svg width="140" height="140" viewBox="0 0 200 200">
      <!-- 背景圆环 -->
      <circle
        cx="100"
        cy="100"
        :r="radius"
        fill="none"
        stroke="var(--bg-tertiary)"
        stroke-width="15"
      />
      
      <!-- 已完成进度 -->
      <circle
        cx="100"
        cy="100"
        :r="radius"
        fill="none"
        stroke="var(--completed-color)"
        stroke-width="15"
        :stroke-dasharray="completedStrokeDasharray"
        :stroke-dashoffset="completedStrokeDashoffset"
        class="progress-circle completed-circle"
        transform="rotate(-90 100 100)"
      />
      
      <!-- 处理中进度 -->
      <circle
        cx="100"
        cy="100"
        :r="radius"
        fill="none"
        stroke="var(--processing-color)"
        stroke-width="15"
        :stroke-dasharray="processingStrokeDasharray"
        :stroke-dashoffset="processingStrokeDashoffset"
        class="progress-circle processing-circle"
        transform="rotate(-90 100 100)"
      />
      
      <!-- 待处理进度 -->
      <circle
        cx="100"
        cy="100"
        :r="radius"
        fill="none"
        stroke="var(--pending-color)"
        stroke-width="15"
        :stroke-dasharray="pendingStrokeDasharray"
        :stroke-dashoffset="pendingStrokeDashoffset"
        class="progress-circle pending-circle"
        transform="rotate(-90 100 100)"
      />
      
      <!-- 中心文本 -->
      <text x="100" y="95" text-anchor="middle" class="progress-text total-text">
        {{ props.total }}
      </text>
      <text x="100" y="115" text-anchor="middle" class="progress-text label-text">
        总任务数
      </text>
    </svg>
    
    <!-- 状态指示器 -->
    <div class="status-indicators">
      <div class="status-indicator">
        <span class="indicator-dot pending-dot"></span>
        <span class="indicator-label">待处理</span>
      </div>
      <div class="status-indicator">
        <span class="indicator-dot processing-dot"></span>
        <span class="indicator-label">处理中</span>
      </div>
      <div class="status-indicator">
        <span class="indicator-dot completed-dot"></span>
        <span class="indicator-label">已完成</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.task-progress-circle {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.progress-circle {
  transition: stroke-dasharray 0.5s ease;
}

.pending-circle {
  filter: drop-shadow(0 0 3px var(--pending-color));
}

.processing-circle {
  filter: drop-shadow(0 0 3px var(--processing-color));
}

.completed-circle {
  filter: drop-shadow(0 0 3px var(--completed-color));
}

.progress-text {
  fill: var(--text-primary);
  font-family: sans-serif;
}

.total-text {
  font-size: 20px;
  font-weight: bold;
}

.label-text {
  font-size: 10px;
}

.status-indicators {
  display: none;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pending-dot {
  background-color: var(--pending-color);
  box-shadow: 0 0 5px var(--pending-color);
}

.processing-dot {
  background-color: var(--processing-color);
  box-shadow: 0 0 5px var(--processing-color);
}

.completed-dot {
  background-color: var(--completed-color);
  box-shadow: 0 0 5px var(--completed-color);
}

.indicator-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* 发光动画效果 */
@keyframes glow {
  0% {
    filter: drop-shadow(0 0 2px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 6px currentColor);
  }
  100% {
    filter: drop-shadow(0 0 2px currentColor);
  }
}

.progress-circle {
  animation: glow 3s infinite;
}
</style>